import React from 'react'
import Navbar from '../../compoents/Navbar'
import { useNavigate, useParams } from 'react-router-dom'
import style from './index.module.css'

function Index() {
  const navigate = useNavigate()
  const { id } = useParams()
  
  // 模拟报告数据 - 根据id获取不同的报告
  const getReportData = (reportId: string) => {
    const reports = [
      {
        title: "双肾及肾血管彩色多普勒",
        patientInfo: {
          name: "王小柯",
          gender: "女",
          age: "28岁"
        },
        examinationInfo: {
          referringPhysician: "王小小",
          department: "门诊放射科",
          examinationTime: "2020-01-01 10:20:36",
          reportTime: "2020-01-20 20:20:30",
          category: "门诊/住院"
        },
        results: {
          examination: "未查询出任何异常,注意饮食规律,生活作息调节",
          diagnosis: "双肺数枚实性小结节,考虑慢性炎性结节或硬结灶,请随访。"
        },
        personnel: {
          examiner: "李医生",
          reviewer: "王医生",
          remarks: "此结果仅作参考,以医院纸质报告为准"
        }
      },
      {
        title: "上腹部CT平扫",
        patientInfo: {
          name: "王小柯",
          gender: "女",
          age: "28岁"
        },
        examinationInfo: {
          referringPhysician: "王小小",
          department: "门诊放射科",
          examinationTime: "2020-01-01 10:20:36",
          reportTime: "2020-01-20 20:20:30",
          category: "门诊/住院"
        },
        results: {
          examination: "肝脏大小形态正常,肝实质密度均匀,未见明显异常密度影。胆囊大小形态正常,壁不厚,内未见明显异常。",
          diagnosis: "上腹部CT平扫未见明显异常。"
        },
        personnel: {
          examiner: "张医生",
          reviewer: "王医生",
          remarks: "此结果仅作参考,以医院纸质报告为准"
        }
      }
    ]
    
    return reports[parseInt(reportId) || 0] || reports[0]
  }

  const reportData = getReportData(id || '0')
  console.log('报告ID:', id, '报告数据:', reportData);

  return (
    <div className={style.container}>
      <Navbar title="检查报告详情" showBack={true} onBack={() => navigate(-1)} />
      
      <div className={style.reportCard}>
        {/* 报告标题 */}
        <div className={style.reportTitle}>
          {reportData.title}
        </div>

        {/* 患者基本信息 */}
        <div className={style.patientBasicInfo}>
          {reportData.patientInfo.name} {reportData.patientInfo.gender} {reportData.patientInfo.age}
        </div>

        {/* 检查详细信息 */}
        <div className={style.examinationDetails}>
          <div className={style.detailRow}>
            <span className={style.detailLabel}>送检医师:</span>
            <span className={style.detailValue}>{reportData.examinationInfo.referringPhysician}</span>
            <span className={style.detailLabel}>送检科室:</span>
            <span className={style.detailValue}>{reportData.examinationInfo.department}</span>
          </div>
          <div className={style.detailRow}>
            <span className={style.detailLabel}>送检时间:</span>
            <span className={style.detailValue}>{reportData.examinationInfo.examinationTime}</span>
          </div>
          <div className={style.detailRow}>
            <span className={style.detailLabel}>报告时间:</span>
            <span className={style.detailValue}>{reportData.examinationInfo.reportTime}</span>
          </div>
          <div className={style.detailRow}>
            <span className={style.detailLabel}>报告类别:</span>
            <span className={style.detailValue}>{reportData.examinationInfo.category}</span>
          </div>
        </div>

        {/* 检查结果 */}
        <div className={style.resultSection}>
          <div className={style.sectionTitle}>检查结果</div>
          <div className={style.resultContent}>
            {reportData.results.examination}
          </div>
        </div>

        {/* 诊断意见 */}
        <div className={style.resultSection}>
          <div className={style.sectionTitle}>诊断意见</div>
          <div className={style.resultContent}>
            {reportData.results.diagnosis}
          </div>
        </div>

        {/* 人员信息 */}
        <div className={style.personnelSection}>
          <div className={style.personnelRow}>
            <span className={style.personnelLabel}>检测人:</span>
            <span className={style.personnelValue}>{reportData.personnel.examiner}</span>
            <span className={style.personnelLabel}>审核人:</span>
            <span className={style.personnelValue}>{reportData.personnel.reviewer}</span>
          </div>
          <div className={style.remarks}>
            <span className={style.remarksLabel}>备注:</span>
            <span className={style.remarksValue}>{reportData.personnel.remarks}</span>
          </div>
        </div>

        {/* 检查影像 */}
        <div className={style.imageSection}>
          <div className={style.sectionTitle}>检查影像</div>
          <div className={style.imageAction}>
            <span className={style.imageActionText}>申请影像复印(未开通) &gt;</span>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Index
